﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM-jQuery基础</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>img{width:100%;}
.a2 .btn{position: relative;}
</style>
</head>
<body>
<div class="container-xl ">
<div class="a0">
<div>逐浪软件</div>    
<div>精准研发</div>
</div>
<input type="button" id="a1" value="切换状态">
</div>

<hr>
<div class="container-xl">
<div id="top">
    <h1>员工管理</h1>
    <ul>
        <li>添加员工信息</li>
        <li>管理员工信息</li>
    </ul>
    <h1>招聘管理</h1>
    <ul>
        <li>浏览招聘信息</li>
        <li>添加应聘信息</li>
        <li>浏览人才库</li>
    </ul>
    <h1>薪酬管理</h1>
    <ul>
        <li>薪酬登记</li>
        <li>酬薪调整</li>
        <li>薪酬查询</li>
    </ul>
</div>
</div>

<hr>
<div class="container-xl a2">
    <h1>使用animate()方法创建自定义动画</h1>
    <div class="aa">停止动作</div>
    <a href="" class="btn btn-info">你好</a>
</div>

<script>
$(document).ready(function () {
    // $(`input[type='button']`).click(function () {
    $(`#a1`).click(function () {
        $(`.a0`).toggle();  //切换DIV元素的显示状态
    })

    $(`#top ul`).hide();//隐藏全部子菜单
    $(`#top h1[class!='title']`).click(function () {
        if ($(this).next().is(`:hidden`)) {
            // $(this)
            $(this).next().slideDown(`slow`);
        }else{
            $(this).next().slideUp(`slow`);
        }
    })

    //使用animate添加动作，和使用stop()方法中止动作
    $(`.a2 .btn`).animate({left:300},1000)
    .delay(3000)    //延迟动作
    .animate({top:200},1000)
    .animate({left:0},1000)
    .animate({top:0},1000);
    $(`.aa`).click(function () {
        $(`.a2 .btn`).stop(true,true);
    })
            



})
</script>
</body>
</html>
